<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>系统参数配置</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../libs/layui/css/layui.css" media="all">
    <style>
        .settings-container {
            padding: 20px;
            background-color: #f2f2f2;
            min-height: 100vh;
        }
        
        .config-card {
            background: #fff;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        
        .config-card h3 {
            border-bottom: 2px solid #009688;
            padding-bottom: 10px;
            margin-bottom: 20px;
        }
        
        .form-actions {
            text-align: center;
            margin-top: 30px;
            padding-top: 20px;
            border-top: 1px solid #e6e6e6;
        }
    </style>
</head>
<body>
    <div class="settings-container">
        <h2><i class="layui-icon layui-icon-console"></i> 系统参数配置</h2>
        
        <div class="layui-row layui-col-space15">
            <!-- LSTM模型参数配置 -->
            <div class="layui-col-md6">
                <div class="config-card">
                    <h3><i class="layui-icon layui-icon-set"></i> LSTM模型参数</h3>
                    <form class="layui-form" lay-filter="lstmForm">
                        <div class="layui-form-item">
                            <label class="layui-form-label">输入时间步长</label>
                            <div class="layui-input-block">
                                <input type="number" name="timeSteps" value="60" placeholder="分钟" autocomplete="off" class="layui-input">
                                <div class="layui-form-mid layui-word-aux">用于训练的历史数据时间窗口</div>
                            </div>
                        </div>
                        
                        <div class="layui-form-item">
                            <label class="layui-form-label">预测时间窗口</label>
                            <div class="layui-input-block">
                                <input type="number" name="predictionWindow" value="15" placeholder="分钟" autocomplete="off" class="layui-input">
                                <div class="layui-form-mid layui-word-aux">模型预测的未来时间范围</div>
                            </div>
                        </div>
                        
                        <div class="layui-form-item">
                            <label class="layui-form-label">隐藏层单元数</label>
                            <div class="layui-input-block">
                                <input type="number" name="hiddenUnits" value="128" placeholder="单元数" autocomplete="off" class="layui-input">
                                <div class="layui-form-mid layui-word-aux">LSTM隐藏层神经元数量</div>
                            </div>
                        </div>
                        
                        <div class="layui-form-item">
                            <label class="layui-form-label">学习率</label>
                            <div class="layui-input-block">
                                <input type="number" name="learningRate" value="0.001" step="0.0001" placeholder="学习率" autocomplete="off" class="layui-input">
                                <div class="layui-form-mid layui-word-aux">模型训练的学习率</div>
                            </div>
                        </div>
                        
                        <div class="layui-form-item">
                            <label class="layui-form-label">批次大小</label>
                            <div class="layui-input-block">
                                <input type="number" name="batchSize" value="32" placeholder="批次大小" autocomplete="off" class="layui-input">
                                <div class="layui-form-mid layui-word-aux">训练时的批次大小</div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            
            <!-- 规则引擎阈值配置 -->
            <div class="layui-col-md6">
                <div class="config-card">
                    <h3><i class="layui-icon layui-icon-engine"></i> 规则引擎阈值</h3>
                    <form class="layui-form" lay-filter="ruleForm">
                        <div class="layui-form-item">
                            <label class="layui-form-label">流量增长阈值</label>
                            <div class="layui-input-block">
                                <input type="number" name="flowThreshold" value="20" placeholder="百分比" autocomplete="off" class="layui-input">
                                <div class="layui-form-mid layui-word-aux">触发绿灯延长的流量增长百分比</div>
                            </div>
                        </div>
                        
                        <div class="layui-form-item">
                            <label class="layui-form-label">排队长度阈值</label>
                            <div class="layui-input-block">
                                <input type="number" name="queueThreshold" value="15" placeholder="车辆数" autocomplete="off" class="layui-input">
                                <div class="layui-form-mid layui-word-aux">触发信号优化的排队车辆数</div>
                            </div>
                        </div>
                        
                        <div class="layui-form-item">
                            <label class="layui-form-label">车速阈值</label>
                            <div class="layui-input-block">
                                <input type="number" name="speedThreshold" value="30" placeholder="km/h" autocomplete="off" class="layui-input">
                                <div class="layui-form-mid layui-word-aux">判定拥堵的最低车速</div>
                            </div>
                        </div>
                        
                        <div class="layui-form-item">
                            <label class="layui-form-label">最小绿灯时长</label>
                            <div class="layui-input-block">
                                <input type="number" name="minGreenTime" value="15" placeholder="秒" autocomplete="off" class="layui-input">
                                <div class="layui-form-mid layui-word-aux">信号灯最小绿灯时间</div>
                            </div>
                        </div>
                        
                        <div class="layui-form-item">
                            <label class="layui-form-label">最大绿灯时长</label>
                            <div class="layui-input-block">
                                <input type="number" name="maxGreenTime" value="60" placeholder="秒" autocomplete="off" class="layui-input">
                                <div class="layui-form-mid layui-word-aux">信号灯最大绿灯时间</div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            
            <!-- 数据采集配置 -->
            <div class="layui-col-md6">
                <div class="config-card">
                    <h3><i class="layui-icon layui-icon-download-circle"></i> 数据采集配置</h3>
                    <form class="layui-form" lay-filter="dataForm">
                        <div class="layui-form-item">
                            <label class="layui-form-label">采集频率</label>
                            <div class="layui-input-block">
                                <input type="number" name="collectFrequency" value="30" placeholder="秒" autocomplete="off" class="layui-input">
                                <div class="layui-form-mid layui-word-aux">数据采集的时间间隔</div>
                            </div>
                        </div>
                        
                        <div class="layui-form-item">
                            <label class="layui-form-label">数据保留天数</label>
                            <div class="layui-input-block">
                                <input type="number" name="retentionDays" value="90" placeholder="天" autocomplete="off" class="layui-input">
                                <div class="layui-form-mid layui-word-aux">历史数据保留时间</div>
                            </div>
                        </div>
                        
                        <div class="layui-form-item">
                            <label class="layui-form-label">异常检测阈值</label>
                            <div class="layui-input-block">
                                <input type="number" name="anomalyThreshold" value="3" placeholder="标准差倍数" autocomplete="off" class="layui-input">
                                <div class="layui-form-mid layui-word-aux">数据异常检测的标准差倍数</div>
                            </div>
                        </div>
                        
                        <div class="layui-form-item">
                            <label class="layui-form-label">自动重连</label>
                            <div class="layui-input-block">
                                <input type="checkbox" name="autoReconnect" lay-skin="switch" lay-text="开启|关闭" checked>
                                <div class="layui-form-mid layui-word-aux">数据源断线时自动重连</div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            
            <!-- 系统运行配置 -->
            <div class="layui-col-md6">
                <div class="config-card">
                    <h3><i class="layui-icon layui-icon-console"></i> 系统运行配置</h3>
                    <form class="layui-form" lay-filter="systemForm">
                        <div class="layui-form-item">
                            <label class="layui-form-label">预测更新频率</label>
                            <div class="layui-input-block">
                                <input type="number" name="predictionFrequency" value="5" placeholder="分钟" autocomplete="off" class="layui-input">
                                <div class="layui-form-mid layui-word-aux">模型预测结果更新频率</div>
                            </div>
                        </div>
                        
                        <div class="layui-form-item">
                            <label class="layui-form-label">优化建议频率</label>
                            <div class="layui-input-block">
                                <input type="number" name="optimizationFrequency" value="10" placeholder="分钟" autocomplete="off" class="layui-input">
                                <div class="layui-form-mid layui-word-aux">信号配时建议更新频率</div>
                            </div>
                        </div>
                        
                        <div class="layui-form-item">
                            <label class="layui-form-label">日志级别</label>
                            <div class="layui-input-block">
                                <select name="logLevel">
                                    <option value="DEBUG">DEBUG</option>
                                    <option value="INFO" selected>INFO</option>
                                    <option value="WARN">WARN</option>
                                    <option value="ERROR">ERROR</option>
                                </select>
                                <div class="layui-form-mid layui-word-aux">系统日志记录级别</div>
                            </div>
                        </div>
                        
                        <div class="layui-form-item">
                            <label class="layui-form-label">自动保存</label>
                            <div class="layui-input-block">
                                <input type="checkbox" name="autoSave" lay-skin="switch" lay-text="开启|关闭" checked>
                                <div class="layui-form-mid layui-word-aux">配置修改后自动保存</div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        
        <!-- 操作按钮 -->
        <div class="form-actions">
            <button class="layui-btn layui-btn-lg layui-btn-normal" onclick="saveAllSettings()">
                <i class="layui-icon layui-icon-ok"></i> 保存所有配置
            </button>
            <button class="layui-btn layui-btn-lg layui-btn-primary" onclick="resetSettings()">
                <i class="layui-icon layui-icon-refresh"></i> 重置为默认值
            </button>
        </div>
    </div>

    <script src="../../libs/layui/layui.js"></script>
    <script>
        layui.use(['element', 'form', 'layer'], function(){
            var element = layui.element;
            var form = layui.form;
            var layer = layui.layer;
            
            // 保存所有配置
            window.saveAllSettings = function() {
                var lstmData = form.val('lstmForm');
                var ruleData = form.val('ruleForm');
                var dataData = form.val('dataForm');
                var systemData = form.val('systemForm');
                
                var allSettings = {
                    lstm: lstmData,
                    rules: ruleData,
                    data: dataData,
                    system: systemData
                };
                
                console.log('保存配置:', allSettings);
                layer.msg('正在保存配置...', {icon: 16, time: 2000});
                setTimeout(function() {
                    layer.msg('配置保存成功！', {icon: 1});
                }, 2000);
            };
            
            // 重置设置
            window.resetSettings = function() {
                layer.confirm('确定要重置所有配置为默认值吗？', {
                    icon: 3,
                    title: '确认重置'
                }, function(index) {
                    layer.msg('正在重置配置...', {icon: 16, time: 2000});
                    setTimeout(function() {
                        location.reload();
                    }, 2000);
                    layer.close(index);
                });
            };
            
            // 导出配置
            window.exportSettings = function() {
                layer.msg('正在导出配置...', {icon: 16, time: 2000});
                setTimeout(function() {
                    layer.msg('配置导出成功！', {icon: 1});
                }, 2000);
            };
            
            // 导入配置
            window.importSettings = function() {
                layer.open({
                    type: 1,
                    title: '导入配置文件',
                    area: ['400px', '200px'],
                    content: '<div style="padding: 20px;"><input type="file" class="layui-input" accept=".json"><br><br><button class="layui-btn layui-btn-fluid" onclick="layer.closeAll()">确认导入</button></div>'
                });
            };
        });
    </script>
</body>
</html>
